<template>
  <div class="main">
    <img :src="url" alt="">
    <!-- <div class="item">
      <img :src="showSvg(obj.today.condition)" alt="" style="height: 50px;width: 50px;">
      <span>今天: {{ obj.today.temp }}</span>
    </div>
    <div class="item">
      <img :src="showSvg(obj.tomorrow.condition)" alt="" style="height: 50px;width: 50px;">
      <span>明天: {{ obj.tomorrow.temp }}</span>
    </div>
    <div class="item">
      <img :src="showSvg(obj.thirdday.condition)" alt="" style="height: 50px;width: 50px;">
      <span>后天: {{ obj.thirdday.temp }}</span>
    </div> -->
  </div>
</template>

<script>
import axios from 'axios'
import duoyun from './img/duoyun.svg'
import qing from './img/riqing.svg'
import wu from './img/zanwushuju.svg'
import leizhenyu from './img/leizhenyu.svg'
import bingbao from './img/bingbao.svg'
export default {
  data() {
    return {
      obj: {
        
      },
      url: import('./img/duoyun.svg'),
      temp: {
        '多云': import('./img/duoyun.svg'),
        '晴': qing,
        '雷阵雨': import('./img/leizhenyu.svg'),
        '冰雹': bingbao,
        '无': wu,
      }
    }
  },
  computed: {
    showSvg() {
      return function(val) {
        console.log(val)
        if(this.temp[val]) {
          console.log(this.temp[val])
          return this.temp[val]
        } else {
          return this.temp['无']
        }
      }
    }
  },
  methods: {
    get() {
      axios({
        headers: {
          Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjEsInVzZXJOYW1lIjoiQ2FpLUh1YWlCaW4iLCJwYXNzd29yZCI6IiIsInVzZXJfcGljIjoiIiwidXNlcl9zaWduYXR1cmUiOiLllK_mnInokL3lj7bnn6Xnp4vmhI8iLCJhY2NvdW50TnVtYmVyIjoiY2hiMTIzIiwiaWF0IjoxNjg0MzA5MDA2LCJleHAiOjE2ODQzOTU0MDZ9.3t0el66vueOhFo5QBOl9gCkR2k9HngyZEwbPOHeYRSQ'
        },
        url: 'http://127.0.0.1/api/getWeather'
      }).then(res => {
        console.log(res.data.data)
        this.obj = res.data.data
      })
    }
  },
  created() {
    console.log(this.temp['多云'])
    this.get()
  }
}
</script>

<style scoped>
.main {
  display: flex;
  padding: 20px 0;
  height: 150px;
  width: 600px;
  margin: 100px auto;
  border: 1px solid #ccc;
}
.item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 1px solid #ccc;
}
</style>